import React, { Component } from 'react'
import { Card, Tabs, message, Icon } from 'antd'
import './ui.less'
export default class Tab extends Component {
  constructor(props) {
    super(props)
    this.newTabIndex = 0
    const panes = [
      { title: 'Tab 1', content: 'Content of Tab 1', key: '1' },
      { title: 'Tab 2', content: 'Content of Tab 2', key: '2' },
      {
        title: 'Tab 3',
        content: 'Content of Tab 3',
        key: '3',
        closable: false
      }
    ]
    this.state = {
      panes,
      activeKey: panes[0].key
    }
  }
  handleChange = key => {
    message.info(`Hi,你选择了页签${key}`)
  }
  onChange = (activeKey) => {
    this.setState({ activeKey });
  }
  add = () => {
    const panes = this.state.panes
    const activeKey = `newTab${this.newTabIndex++}`
    panes.push({
      title: `new Tab${this.newTabIndex}`,
      content: `Content of new Tab${this.newTabIndex}`,
      key: activeKey
    })
    this.setState({
      panes,
      activeKey
    })
  }
  remove = targetKey => {
    let activeKey = this.state.activeKey
    const panes = this.state.panes.filter(item => item.key !== targetKey)
    let lastIndex =
      this.state.panes.findIndex(item => item.key === targetKey) - 1
    if (lastIndex >= 0 && activeKey === targetKey) {
      activeKey = panes[lastIndex].key
    }
    console.log(activeKey)
    this.setState({
      panes,
      activeKey
    })
  }
  onEdit = (targetKey, action) => {
    this[action](targetKey)
  }

  render() {
    const TabPane = Tabs.TabPane

    return (
      <div>
        <Card title="Tab页签" className="card-wrap">
          <Tabs defaultActiveKey="1" onChange={this.handleChange}>
            <TabPane tab="Tab 1" key="1">
              欢迎学习React课程 1
            </TabPane>
            <TabPane tab="Tab 2" disabled key="2">
              欢迎学习React课程 2
            </TabPane>
            <TabPane tab="Tab 3" key="3">
              欢迎学习React课程 3
            </TabPane>
          </Tabs>
        </Card>
        <Card title="Tab带图标页签" className="card-wrap">
          <Tabs defaultActiveKey="1" onChange={this.handleChange}>
            <TabPane
              tab={
                <span>
                  <Icon type="plus" />
                  Tabs 1
                </span>
              }
              key="1"
            >
              欢迎学习React课程 1
            </TabPane>
            <TabPane
              tab={
                <span>
                  <Icon type="edit" />
                  Tabs 2
                </span>
              }
              key="2"
            >
              欢迎学习React课程 2
            </TabPane>
            <TabPane
              tab={
                <span>
                  <Icon type="delete" />
                  Tabs 3
                </span>
              }
              key="3"
            >
              欢迎学习React课程 3
            </TabPane>
          </Tabs>
        </Card>
        <Card
          title="Tab可关闭卡片式页签
"
        >
          <Tabs onChange={this.onChange} type="editable-card" onEdit={this.onEdit} activeKey={this.state.activeKey}>
            {this.state.panes.map(item => {
              return (
                <TabPane tab={item.title} key={item.key} closable={item.closable}>
                  {item.content}
                </TabPane>
              )
            })}
          </Tabs>
        </Card>
      </div>
    )
  }
}
